<template>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :scroll="{ y: 300 }"
        bordered
        size="small"
        :row-selection="rowSelection"
    >
        <a slot="cover" slot-scope="cover">{{ cover }}</a>
        <div v-for="col in ['newName', 'cover']" :key="col" :slot="col" slot-scope="text, record">
            <div>
                <a-input
                    v-if="record.editable"
                    style="margin: -5px 0"
                    :value="text"
                    @change="(e) => handleChange(e.target.value, record.key, col)"
                />
                <template v-else>
                    <a-popover :v-model="popoverVisible(record.key)" trigger="click" placement="top">
                        <div slot="content" @click="setPopover(record.key, false)">
                            <img :src="text" width="100" />
                        </div>
                        <a v-if="col === 'cover'" @click="setPopover(record.key, true)">{{ text }}</a>
                        <span v-else>{{ text }}</span>
                    </a-popover>
                </template>
            </div>
        </div>
        <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
                <span v-if="record.editable">
                    <a @click="() => save(record.key)">保存</a>
                    &nbsp;
                    <a @click="() => cancel(record.key)">取消</a>
                </span>
                <span v-else>
                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
                </span>
            </div>
        </template>
    </a-table>
</template>

<script>
    export default {
        name: 'MyTable',
        props: {
            dataProps: {
                default: () => {
                    return []
                },
            },
        },
        data() {
            return {
                columns: [
                    {
                        title: '原文件名',
                        dataIndex: 'name',
                        key: 'name',
                        width: 200,
                    },
                    {
                        title: '新的文件名',
                        dataIndex: 'newName',
                        key: 'newName',
                        width: 150,
                        scopedSlots: { customRender: 'newName' },
                    },
                    {
                        title: '图片地址',
                        dataIndex: 'cover',
                        ellipsis: true,
                        key: 'cover',
                        width: 300,
                        scopedSlots: { customRender: 'cover' },
                    },
                    {
                        title: '操作',
                        dataIndex: 'operation',
                        key: 'operation',
                        width: 80,
                        scopedSlots: { customRender: 'operation' },
                        align: 'center',
                    },
                ],
                editingKey: '',
                cacheData: [],
                data: [],
                selectedRows: [],
                popover: [],
            }
        },
        computed: {
            popoverVisible() {
                return (key) => {
                    const res = this.popover.find((item) => item.key == key)
                    return res ? res.visible : false
                }
            },
            rowSelection() {
                return {
                    onChange: (selectedRowKeys, selectedRows) => {
                        this.selectedRows = selectedRows
                        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                    },
                    getCheckboxProps: (record) => ({
                        props: {
                            disabled: record.name === 'Disabled User', // Column configuration not to be checked
                            name: record.name,
                        },
                    }),
                }
            },
        },
        watch: {
            dataProps: {
                handler(nval) {
                    this.cacheData = nval.map((item) => ({ ...item }))
                    this.data = nval.map((item) => ({ ...item }))
                    const popover = []
                    nval.forEach(({ key }) => {
                        popover.push({
                            key,
                            visible: false,
                        })
                    })
                    this.popover = popover
                },
                deep: true,
            },
        },
        mounted() {
            this.popover = []
        },
        methods: {
            handleChange(value, key, column) {
                const newData = [...this.data]
                const target = newData.filter((item) => key === item.key)[0]
                if (target) {
                    target[column] = value
                    this.data = newData
                }
            },
            edit(key) {
                const newData = [...this.data]
                const target = newData.filter((item) => key === item.key)[0]
                this.editingKey = key
                if (target) {
                    target.editable = true
                    this.data = newData
                }
            },
            save(key) {
                const newData = [...this.data]
                const newCacheData = [...this.cacheData]
                const target = newData.filter((item) => key === item.key)[0]
                const targetCache = newCacheData.filter((item) => key === item.key)[0]
                if (target && targetCache) {
                    delete target.editable
                    this.data = newData
                    Object.assign(targetCache, target)
                    this.cacheData = newCacheData
                }
                this.editingKey = ''
                this.$store.commit('videos/setSomeVideo', newData)
            },
            cancel(key) {
                const newData = [...this.data]
                const target = newData.filter((item) => key === item.key)[0]
                this.editingKey = ''
                if (target) {
                    Object.assign(target, this.cacheData.filter((item) => key === item.key)[0])
                    delete target.editable
                    this.data = newData
                }
            },
            clearData() {
                this.editingKey = ''
                this.cacheData = []
                this.data = []
            },
            setPopover(key, visible) {
                const i = this.popover.findIndex((item) => item.key == key)
                if (i > -1) this.$set(this.popover, i, { key, visible })
            },
        },
    }
</script>

<style></style>
